<template>
	
		
		<div class="top_bottom">
			<div style="width: 100%;height: 180px;background-color: #30383F;">
			<div style="margin: 0 auto;width: 70px;text-align: center;padding-top: 50px;">
				<div>
					<i style="font-size: 50px;color: white;" class="alicon icon-wode"></i>
				</div>
				<div style="color: white;" id="usn" >{{userName}}</div >
				<div style="color: #FFFFFF;font-size: 12px;"></div >
			</div>
		</div>
	<div >
			<div class="mui-content" style="margin-top: 0px;">
	
				<div class="mui-content-padded" style="">
					<div class="mui-input-group">
						<div class="mui-input-row">
							<label style="text-align: left;">
								原始密码
								
							</label>
							<input v-model="oldpassword" type="password" placeholder="使用数字或数字加字母，8-12位" style="height:50px !important;padding-left:15px;">
						</div>
						<div class="mui-input-row">
							<label style="text-align: left;">
								新密码
							</label>
							<input v-model="newpassword" type="password" placeholder="使用数字或数字加字母，8-12位"  style="height:50px !important;padding-left:15px;">
						</div>
						<div class="mui-input-row">
							<label style="text-align: left;">
								确认密码
							</label>
							<input v-model="new2password" type="password" placeholder="再次输入新密码"  style="height:50px !important;padding-left:15px;">
						</div>
					</div>
				</div>
			</div>
				
				<div style="padding:20px 30px;">
					<mt-button @click="modify" size="large" type="primary" >提交更改</mt-button>
				</div>
		</div>
		
	</div>
		
</template>

<script>
//	import md5 from 'md5';
	import { mapState } from 'vuex';
	import { Toast } from 'mint-ui';
	import api from "@/components/js/Apidomain.js"
	
	export default{
		data(){
			return{
				oldpassword:"",
				newpassword:"",
				new2password:"",
				userName:'',
				
			}
		}, 
		
		mounted()
            {
          		this.init();   //页面初始化加载
        	},
		methods:{
			init()
					{	
						this.userName= sessionStorage.getItem('username');
					},
			modify:function(){ 
			if(this.oldpassword == "" || this.newpassword == "" || this.new2password == ""){
					Toast({ 
							message: '请输入密码',
							position: 'middle',
							duration: 1000 
					});
					return;
				}
			if(/^(?![a-zA-Z]+$)[0-9A-Za-z]{8,12}$/.test(this.newpassword)){
				if(this.newpassword == this.new2password){
//					let oldmd5 = md5(this.oldpassword)
//					let newmd5 = md5(this.newpassword)
//					console.log(oldmd5)
//					console.log(newmd5)
					let url = api.apidomain+"/tqes/web/sysUser/repertPwd"
//					this.loadingshow = true;
					var self = this;
					this.$http.post(url, {
						"loginPwdB": this.oldpassword,
						"repertPwd":this.newpassword 
					})
					.then(function(response) {
						console.log(response)
						if(response.data.msg == "原密码输入有误，请重新输入！"){
								Toast({
									message: '原密码输入有误',
									position: 'middle',
									duration: 1000
								});  
							} 
							if(response.data.success == true){
								Toast({
									message: '密码修改成功，请重新登录',
									position: 'middle',
									duration: 1000
								}); 
								self.$router.push('/login')
							}
//							if(response.data.type == 5){
//								Toast({
//									message: '服务器异常',
//									position: 'middle',
//									duration: 1000
//								}); 
//							}
				})	
					.catch(function(error) {
						console.log(error);
					});
				}else{
					Toast({ 
							message: '新密码不一致',
							position: 'middle',
							duration: 1000 
					});
					return; 
				}
				}else{
					Toast({
									message: '密码不符合规则',
									position: 'middle',
									duration: 1000
								}); 
				}
			}
		}
	}
</script>

<style scoped>
	
	.mui-content-padded{
		margin:0px !important;
	}
	.mui-input-group .mui-input-row{
		height:50px !important;
	}
	.mui-input-row label{
		width:35% !important;
		line-height: 50px;
		padding:0px 15px;
	}
	.mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea{
		width:60% !important;
	}
	input::-webkit-input-placeholder {
          /* placeholder颜色  */
      color: #aab2bd;
        /* placeholder字体大小  */
      font-size: 12px;
       /* placeholder位置  */
      text-align: right;
     }
</style>